<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>淘宝网 - 淘！我喜欢</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="shortcut icon" href="tb.ico" type="image/x-icon" >
</head>
<body>
    <!-- 第一行导航栏 -->

    <div id ="header" class = "header">
        <div id = "header_wrapper" class = "header-wrapper">
                <!-- 左边导航栏 -->
            <div id = "header_wrapper_left" class = "header-wrapper-left">
                <ul>
                    <li>中国大陆<span class = "triangel-icon"></span><div id = "area_change" class = "area-change">
                            <ul><li><a>&nbsp;&nbsp;全球</a></li>
                                    <li><a>&nbsp;&nbsp;中国大陆<a></li>
                                    <li><a>&nbsp;&nbsp;香港<a></li>
                                    <li><a>&nbsp;&nbsp;台湾<a><a></li>
                                    <li><a>&nbsp;&nbsp;澳门<a></li>
                                    <li><a>&nbsp;&nbsp;韩国<a></li>
                                    <li><a>&nbsp;&nbsp;马来西亚<a></li>
                                    <li><a>&nbsp;&nbsp;澳大利亚<a></li>
                                    <li><a>&nbsp;&nbsp;新加坡<a></li>
                                    <li><a>&nbsp;&nbsp;新西兰<a></li>
                                    <li><a>&nbsp;&nbsp;加拿大<a></li>
                                    <li><a>&nbsp;&nbsp;美国<a></li>
                                    <li><a>&nbsp;&nbsp;日本<a></li>
                            </ul>
                        </div>
                    <li><span>亲，请登录</span>  <a>免费注册</a></li>
                    <li><a>手机逛淘宝</a></li>
                </ul>
            </div>
            <!-- 右边导航栏 -->
            <div id = "header_wrapper_right" class = "header-wrapper-right">
                <ul>
                    <li><span>我的淘宝</span></li>
                    <li><span>购物车</span></li>
                    <li><span>收藏夹</span></li>
                    <li><span>商品分类</span></li>
                    <li><span>|</span></li>
                    <li><span>卖家中心</span></li>
                    <li><span>联系客服</span></li>
                    <li><span>网站导航</span></li>                   
                </ul>
            </div>
            <div></div>
        </div>
    </div>
        <!-- 第二行导航栏 -->
    <div id = "banner" class = "banner">
        <div id = "banner_wrapper" class = "banner-wrapper">
            <div class = "banner-index"><img src = "images/banner1.png"></div>
            <ul id = "banner_ul">
                <li class = "banner-content">
                    <h4 class = "banner-title">内衣配件</h4>
                    <p class = "banner-des">平价尖货速抢</p>
                    <img class = "banner-img"></img>
                </li>
                <li class = "banner-content">
                        <h4 class = "banner-title">母婴潮品</h4>
                        <p class = "banner-des">应季剁手指南</p>
                        <img class = "banner-img">
                </li>
                <li class = "banner-content">
                        <h4 class = "banner-title">品质男鞋</h4>
                        <p class = "banner-des">街拍必备好鞋</p>
                        <img class = "banner-img">
                </li>
                <li class = "banner-content">
                            <h4 class = "banner-title">流行女鞋</h4>
                            <p class = "banner-des">跨店满减包邮</p>
                            <img class = "banner-img">
                </li>
                <li class = "banner-content">
                        <h4 class = "banner-title">时髦女装</h4>
                        <p class = "banner-des">新衣出游季</p>
                        <img class = "banner-img">
            </li>
            </ul>
        </div>
    </div>
            <!-- 第三行导航搜索栏 -->
    <div id = "nav" class = "nav">
        <div class = "nav-inner">
           <h1 class = "nav-logo"><img src = "images/logo.png" alt = "淘宝网"></h1>
           <div class = "search-wrapper">
                <div class = "nav-search" >
                        <ul>
                            <li class = "current-search">宝贝</li>
                            <li>天猫</li>
                            <li>店铺</li>
                        </ul>
                        <div class = "search1">
                            <div class = "search">
                                <input type = "text" placeholder="带摄像头的充电宝">
                                <span></span>
                            </div>
                            <button>搜索</button>
                        </div>

                 </div>
                        <div class = "nav-list">
                            <ul>                                   
                                <li><a>新款连衣裙</a></li>
                                <li><a>四件套</a></li>
                                <li class = "current-list"><a>潮流T恤</a></li>
                                <li><a>时尚女鞋</a></li>
                                <li><a>短裤</a></li>
                                <li><a>半身裙</a></li>
                                <li><a>男士外套</a></li>
                                <li><a>墙纸</a></li>
                                <li><a>行车记录仪</a></li>
                                <li><a>新款男鞋</a></li>
                                <li><a>耳机</a></li>
                                <li><a>时尚女包</a></li>
                                 <li><a>沙发</a></li>
                            </ul>                   
                        </div>
           </div>

        </div>
    </div>
    <!-- 内容区 -->
    <div id = "content" class = "content">
            <div class="content-nav">
                <aside class="topic">主题市场</aside>
                <ul>
                    <li><a href ="#">天猫</a></li>
                    <li><a href ="#">聚划算</a></li>
                    <li><a href ="#">天猫超市</a></li>
                    <li class="pipiLine">|</li>
                    <li><a href ="#">淘抢购</a></li>
                    <li><a href ="#">电器城</a></li>
                    <li><a href ="#">司法拍卖</a></li>
                    <li><a href ="#">淘宝心选</a></li>
                    <li><a href ="#">兴农扶贫</a></li>
                    <li class="pipiLine">|</li>
                    <li><a href ="#">飞猪旅行</a></li>
                    <li><a href ="#">智能生活</a></li>
                    <li><a href ="#">苏宁易购</a></li>
                </ul>
            </div>
            <aside class="content-left">
                <ul>
                    <li><a>女装</a>
                        <span>/</span>
                        <a>男装</a>
                        <span>/</span>
                        <a>内衣</a>
                        <span><img></span>
                    </li>
                    <li><a>鞋靴</a>
                        <span>/</span>
                        <a>箱包</a>
                        <span>/</span>
                        <a>配件</a>
                        <span><img></span>
                    </li>                    <li><a>童装玩具</a>
                        <span>/</span>
                        <a>孕产</a>
                        <span>/</span>
                        <a>用品</a>
                        <span><img></span>
                    </li>                    <li><a>家电</a>
                        <span>/</span>
                        <a>数码</a>
                        <span>/</span>
                        <a>手机</a>
                        <span><img></span>
                    </li>                    <li><a>美妆</a>
                        <span>/</span>
                        <a>洗护</a>
                        <span>/</span>
                        <a>保健品</a>
                        <span><img></span>
                    </li>                    <li><a>珠宝</a>
                        <span>/</span>
                        <a>眼镜</a>
                        <span>/</span>
                        <a>手表</a>
                        <span><img></span>
                    </li>                   <li><a>运动</a>
                        <span>/</span>
                        <a>户外</a>
                        <span>/</span>
                        <a>乐器</a>
                        <span><img></span>
                    </li> 
                    <li><a>游戏</a>
                        <span>/</span>
                        <a>动漫</a>
                        <span>/</span>
                        <a>影视</a>
                        <span><img></span>
                    </li>                    <li><a>美食</a>
                        <span>/</span>
                        <a>生鲜</a>
                        <span>/</span>
                        <a>零食</a>
                        <span><img></span>
                    </li>                    <li><a>鲜花</a>
                        <span>/</span>
                        <a>宠物</a>
                        <span>/</span>
                        <a>农资</a>
                        <span><img></span>
                    </li>                    <li><a>工具</a>
                        <span>/</span>
                        <a>装修</a>
                        <span>/</span>
                        <a>建材</a>
                        <span><img></span>
                    </li>                    <li><a>家具</a>
                        <span>/</span>
                        <a>家饰</a>
                        <span>/</span>
                        <a>家纺</a>
                        <span><img></span>
                    </li>                    <li><a>汽车</a>
                        <span>/</span>
                        <a>二手车</a>
                        <span>/</span>
                        <a>用品</a>
                        <span><img></span>
                    </li>                    <li><a>办公</a>
                        <span>/</span>
                        <a>DIY</a>
                        <span>/</span>
                        <a>五金电子</a>
                        <span><img></span>
                    </li>                    <li><a>百货</a>
                        <span>/</span>
                        <a>餐厨</a>
                        <span>/</span>
                        <a>家庭保健</a>
                        <span><img></span>
                    </li>                    <li><a>学习</a>
                        <span>/</span>
                        <a>卡券</a>
                        <span>/</span>
                        <a>本地服务</a>
                        <span><img></span>
                    </li> 
                </ul>
            </aside>
            <div class="content-ads">
                <div class="ads1">
                    <ul class = "ads1-img">
                        <li><img src="images/ads1_1.webp" alt=""></li>
                        <li><img src="images/ads1_2.jpg" alt=""></li>
                        <li><img src="images/ads1_3.jpg" alt=""></li>
                        <li><img src="images/ads1_4.jpg" alt=""></li>
                        <li><img src="images/ads1_5.webp" alt=""></li>
                        <li><img src="images/ads1_1.webp" alt=""></li>
                    </ul>
                    <ul class = "ads1-list">
                        <li class = "current"></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                    <span class="button-left">&lt;</span>
                    <span class="button-right">&gt;</span>
                </div>
                <div class="ads2">
                    <img src="images/ads2.webp" alt="">
                </div>
                <div class="ads3">
                    <div class="ads3-head">
                        <p>理想生活上天猫</p>
                        <div><span>1</span>/6</div>
                    </div>
                    <div class="ads3-list">
                        <ul>
                            <li class = "current"></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                    <div class="ads3-body">
                        <ul>
                            <li><a class = "left"><img src="images/ads4_1.jpg" alt=""></a><a class = "right"><img src="images/ads4_2.jpg" alt=""></a></li>
                            <li><a class = "left"><img src="images/ads4_1.jpg" alt=""></a><a class = "right"><img src="images/ads4_2.jpg" alt=""></a></li>
                            <li><a class = "left"><img src="images/ads4_1.jpg" alt=""></a><a class = "right"><img src="images/ads4_2.jpg" alt=""></a></li>
                            <li><a class = "left"><img src="images/ads4_1.jpg" alt=""></a><a class = "right"><img src="images/ads4_2.jpg" alt=""></a></li>
                            <li><a class = "left"><img src="images/ads4_1.jpg" alt=""></a><a class = "right"><img src="images/ads4_2.jpg" alt=""></a></li>
                            <li><a class = "left"><img src="images/ads4_1.jpg" alt=""></a><a class = "right"><img src="images/ads4_2.jpg" alt=""></a></li>
                            <li></li>
                        </ul>
                    </div>
                </div>
                <div class="ads4">
                    <p>今日热卖</p>
                    <div class="ads4_content">
                        <img src="images/ad4.jpg" alt="">
                    </div>
                </div>
            </div>
            <aside class="content-right">
                <div class="top">
                    <div class="member">
                        <div></div>
                    </div>
                    <p>Hi! tb_0299755</p>
                    <div class = "gold"><a href="">领淘金币抵钱</a><a href="">会员俱乐部</a></div>
                    <ul>
                        <li  class = "state">0<p>待收货</p></li>
                        <li  class = "state">0<p>待发货</p></li>
                        <li  class = "state">0<p>待付款</p></li>
                        <li  class = "state">0<p>待评价</p></li>
                    </ul>
                </div>
                <p class = "jb"><a>网上有害信息举报专区<span></span></a></p>
                <div class = "medium">
                    <ul class = "head">
                        <li>公告</li>
                        <li>规则</li>
                        <li>论坛</li>
                        <li>安全</li>
                        <li>公益</li>
                    </ul>
                    <ul class = "content">
                            <li><a href="">新增《淘宝网抽检标准（商用厨房电器）》</a>
                            <a href="">公示通知《淘宝禁售商品管理规范》</a>
                            <a href="">关于证券咨询类商品规则解读变更公示通知</a>
                            <a href="">新增《淘宝网大家电行业管理规范》</a></li>
                            <li><a href=""></a>
                            <a href=""></a>
                            <a href=""></a>
                            <a href=""></a></li>
                            <li><a href=""></a>
                            <a href=""></a>
                            <a href=""></a>
                            <a href=""></a></li>
                            <li><a href=""></a>
                            <a href=""></a>
                            <a href=""></a>
                            <a href=""></a></li>
                            <li><a href=""></a>
                            <a href=""></a>
                            <a href=""></a>
                            <a href=""></a></li>
                        </ul>
                </div>                
                <div class="bottom" id = "bottom">
                    <ul>
                        <li><span></span><p>充话费</p></li>
                        <li><span></span><p>旅行</p></li>
                        <li><span></span><p>车险</p></li>
                        <li><span></span><p>游戏</p></li>
                        <li><span></span><p>彩票</p></li>
                        <li><span></span><p>电影</p></li>
                        <li><span></span><p>酒店</p></li>
                        <li><span></span><p>理财</p></li>
                        <li><span></span><p>找服务</p></li>
                        <li><span></span><p>演出</p></li>
                        <li><span></span><p>水电煤</p></li>
                        <li><span></span><p>火车票</p></li>
                    </ul>
                </div>
                <h3>阿里APP<span>更多></span></h3>
                <ul class= "logos">
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                </ul>
            </aside>
            <section class="headLines">
                <div class="lines-left">
                    <span></span>
                    <p>让你的生活更有趣</p>
                </div>
                <div class="lines-right">
                    <span></span>
                    <h6>微漫酱访谈第三期：超萌舞见弥音音！</h6>
                    <p>哈喽，大家好，我是你们可爱的微漫酱，今天我们请到了一位舞见小姐姐来做客我们的访谈事，她就是弥音音！</p>
                </div>
                <p></p>
            </section>
    </div>

    <div id = "footer" class = "footer"></div>
<script src = "js/index.js"></script>    
</body>
</html>
